<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>订单系统</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
		  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div id="app">
	<div class="container">

		<input class="btn-block" type="button" value="刷新订单" @click="refresh">
		<table class="table">
			<tr>
				<td>订单编号</td>
				<td>电影名</td>
				<td>订单状态</td>
			</tr>
			<tr v-for="(order,i) in orders" :key="i">
				<td>{{order.orderId}}</td>
				<td>{{order.movieName}}</td>
				<td>{{order.status === 0 ? "支付成功 ,出票中" : "已出票"}}</td>
			</tr>
		</table>

	</div>
</div>
</body>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                orders: {
                    type: Array,
                    default: {
                        return: []
                    }
                }
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('/order/orders')
                    .then(
                        res => {
                            this.orders = res.data;
                        }
                    )
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            refresh() {
                this.getData();
            }
        },

    });
</script>
</html>